{{extend name="layout/base-html"}}

{{block name="body"}}
<style>
    .xm-form-select {
        width: 100%;
    }

    .xm-select .scroll-body {
        padding-left: 10px;
        overflow: hidden;
    }

    xm-select > .xm-body .xm-body-custom * {
        box-sizing: border-box;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label"><span class="x-red">*</span>名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{{$data.name|default=''}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入描述"
                              class="layui-textarea">{{$data.description|default=''}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>选择权限</label>

                <div class="layui-input-block">
                    <div id="rules" class="xm-form-select"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>

                <button class="layui-btn" lay-filter="{{$data ? 'edit' : 'add'}}" lay-submit="">
                    {{$data ? '修改' : '增加'}}
                </button>
            </div>
        </form>
    </div>
</div>

<script type="module">
    import {update, save} from "/static/admin/js/api/additional/admin-role.js";
    import { rain } from "/static/admin/js/app.js";

    layui.use(['form', 'layer', 'transfer'], () => {
        let form = layui.form,
            transfer = layui.transfer;
        let event = '{{$data ? "edit" : "add"}}';

        // 监听事件
        formData(form, event, 'edit' === event ? {
            request: update,
            id: '{{$data.id|default=0}}',
        } : {
            request: save,
        });

        // 穿梭框
        (() => {
            // 权限列表
            let list = [];
            JSON.parse('{{$rules|raw}}').forEach(item => {
                list.push({ value: item.id, title: item.name });
            });

            // 编辑选中的权限
            let initValue = '{{$data.ruleIds|raw||default=""}}'.split(',');

            // 渲染
            let rulesSelect = xmSelect.render({
                ...rain.config.xmSelect,

                el: '#rules',
                content: "<div id='transfer'></div>",
                height: 'auto',
                direction: 'down',
                autoRow: true,
                initValue: initValue,
                data: list,
                name: 'rules',
                layVerify: 'required',
                prop: {name: 'title'},
                on: function (data) {
                    if (!data.isAdd) {
                        transfer.reload('transfer', {
                            value: rulesSelect.getValue('value')
                        })
                    }
                }
            });

            // 使用穿梭框组件
            transfer.render({
                id: 'transfer',
                elem: '#transfer',  //绑定元素
                title: ['未选权限', '已选权限'],
                data: list,
                value: initValue,
                width: "40%",
                onchange: function (data, index) {
                    if (index === 0) {
                        rulesSelect.append(data)
                    } else {
                        rulesSelect.delete(data)
                    }
                }
            });
        })();
    });
</script>
{{/block}}
